<template>
  <div class="course-assignment">
    <div class="header">
      <h2>课程分配</h2>
      <p class="subtitle">管理教师与课程的关联关系</p>
    </div>

    <!-- 视图切换 -->
    <div class="view-tabs">
      <button 
        :class="['tab-btn', { active: activeView === 'teacher' }]"
        @click="activeView = 'teacher'"
      >
        <i class="fas fa-chalkboard-teacher"></i>
        按教师查看
      </button>
      <button 
        :class="['tab-btn', { active: activeView === 'course' }]"
        @click="activeView = 'course'"
      >
        <i class="fas fa-book"></i>
        按课程查看
      </button>
    </div>

    <!-- 按教师查看 -->
    <div v-if="activeView === 'teacher'" class="teacher-view">
      <div class="filters">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input 
            v-model="teacherSearchQuery" 
            type="text" 
            placeholder="搜索教师姓名或工号"
            @input="searchTeachers"
          >
        </div>
        <select v-model="teacherStatusFilter" @change="loadTeachers">
          <option value="">全部状态</option>
          <option value="active">启用</option>
          <option value="inactive">禁用</option>
        </select>
      </div>

      <div class="teacher-cards">
        <div v-for="teacher in teachers" :key="teacher.id" class="teacher-card">
          <div class="teacher-header">
            <div class="teacher-info">
              <h3>{{ teacher.name }}</h3>
              <p>{{ teacher.employee_id }} - {{ teacher.email }}</p>
            </div>
            <div class="teacher-actions">
              <button 
                class="btn btn-primary btn-sm"
                @click="assignCoursesToTeacher(teacher)"
              >
                <i class="fas fa-plus"></i>
                分配课程
              </button>
            </div>
          </div>
          
          <div class="courses-section">
            <div class="course-count">
              <i class="fas fa-book-open"></i>
              <span>已分配课程: {{ teacher.courses?.length || 0 }} 门</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 按课程查看 -->
    <div v-if="activeView === 'course'" class="course-view">
      <div class="filters">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input 
            v-model="courseSearchQuery" 
            type="text" 
            placeholder="搜索课程名称或代码"
            @input="searchCourses"
          >
        </div>
        <select v-model="courseCategoryFilter" @change="loadCourses">
          <option value="">全部类型</option>
          <option value="required">必修课</option>
          <option value="elective">选修课</option>
          <option value="practical">实践课</option>
        </select>
      </div>

      <div class="course-cards">
        <div v-for="course in courses" :key="course.id" class="course-card">
          <div class="course-header">
            <div class="course-info">
              <h3>{{ course.name }}</h3>
              <p>{{ course.course_code }} - {{ course.credits }}学分</p>
              <span :class="['category-tag', course.category]">
                {{ getCategoryLabel(course.category) }}
              </span>
            </div>
            <div class="course-actions">
              <button 
                class="btn btn-primary btn-sm"
                @click="assignTeachersToCourse(course)"
              >
                <i class="fas fa-user-plus"></i>
                分配教师
              </button>
            </div>
          </div>
          
          <div class="teachers-section">
            <h4>授课教师 ({{ course.teachers?.length || 0 }})</h4>
            <div v-if="course.teachers && course.teachers.length > 0" class="teacher-list">
              <div 
                v-for="teacher in course.teachers" 
                :key="teacher.id"
                class="teacher-item"
              >
                <div class="teacher-info">
                  <span class="teacher-name">{{ teacher.name }}</span>
                  <span class="teacher-code">{{ teacher.employee_id }}</span>
                </div>
                <button 
                  class="btn btn-danger btn-xs"
                  @click="removeTeacherFromCourse(teacher.id, course.id)"
                  title="移除教师"
                >
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
            <div v-else class="no-teachers">
              <i class="fas fa-user-slash"></i>
              <span>暂无授课教师</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分配课程给教师模态框 -->
    <div v-if="showAssignCoursesModal" class="modal-overlay" @click="closeModals">
      <div class="modal large" @click.stop>
        <div class="modal-header">
          <h3>为 {{ currentTeacher?.name }} 分配课程</h3>
          <button class="close-btn" @click="closeModals">&times;</button>
        </div>
        <div class="modal-body">
          <div class="assignment-container">
            <div class="available-section">
              <h4>可分配课程</h4>
              <div class="search-box">
                <i class="fas fa-search"></i>
                <input 
                  v-model="availableCoursesSearch" 
                  type="text" 
                  placeholder="搜索课程"
                  @input="filterAvailableCourses"
                >
              </div>
              <div class="item-list">
                <div 
                  v-for="course in filteredAvailableCourses" 
                  :key="course.id"
                  class="assignment-item"
                  @click="assignCourseToTeacher(course)"
                >
                  <div class="item-info">
                    <div class="item-name">{{ course.name }}</div>
                    <div class="item-details">{{ course.course_code }} - {{ course.credits }}学分</div>
                  </div>
                  <button class="btn btn-primary btn-sm">
                    <i class="fas fa-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="assigned-section">
              <h4>已分配课程</h4>
              <div class="item-list">
                <div 
                  v-for="course in currentTeacherCourses" 
                  :key="course.id"
                  class="assignment-item assigned"
                >
                  <div class="item-info">
                    <div class="item-name">{{ course.name }}</div>
                    <div class="item-details">{{ course.course_code }} - {{ course.credits }}学分</div>
                  </div>
                  <button 
                    class="btn btn-danger btn-sm"
                    @click="removeCourseFromTeacher(course)"
                  >
                    <i class="fas fa-arrow-left"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-actions">
            <button type="button" class="btn btn-outline" @click="closeModals">
              取消
            </button>
            <button type="button" class="btn btn-primary" @click="submitCourseAssignment">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分配教师给课程模态框 -->
    <div v-if="showAssignTeachersModal" class="modal-overlay" @click="closeModals">
      <div class="modal large" @click.stop>
        <div class="modal-header">
          <h3>为 {{ currentCourse?.name }} 分配教师</h3>
          <button class="close-btn" @click="closeModals">&times;</button>
        </div>
        <div class="modal-body">
          <div class="assignment-container">
            <div class="available-section">
              <h4>可分配教师</h4>
              <div class="search-box">
                <i class="fas fa-search"></i>
                <input 
                  v-model="availableTeachersSearch" 
                  type="text" 
                  placeholder="搜索教师"
                  @input="filterAvailableTeachers"
                >
              </div>
              <div class="item-list">
                <div 
                  v-for="teacher in filteredAvailableTeachers" 
                  :key="teacher.id"
                  class="assignment-item"
                  @click="assignTeacherToCourseAction(teacher)"
                >
                  <div class="item-info">
                    <div class="item-name">{{ teacher.name }}</div>
                    <div class="item-details">{{ teacher.employee_id }} - {{ teacher.email }}</div>
                  </div>
                  <button class="btn btn-primary btn-sm">
                    <i class="fas fa-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="assigned-section">
              <h4>已分配教师</h4>
              <div class="item-list">
                <div 
                  v-for="teacher in currentCourseTeachers" 
                  :key="teacher.id"
                  class="assignment-item assigned"
                >
                  <div class="item-info">
                    <div class="item-name">{{ teacher.name }}</div>
                    <div class="item-details">{{ teacher.employee_id }} - {{ teacher.email }}</div>
                  </div>
                  <button 
                    class="btn btn-danger btn-sm"
                    @click="removeTeacherFromCourse(teacher)"
                  >
                    <i class="fas fa-arrow-left"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-actions">
            <button type="button" class="btn btn-outline" @click="closeModals">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { getTeachers } from '@/api/rbac/usersByRole'
import { 
  getAllCourses as getCourses,
  getCourseTeachers,
  assignTeacherToCourse,
  removeTeacherFromCourse as removeTeacherFromCourseAPI
} from '@/api/course-management'
import { getTeacherCourses } from '@/api/rbac/courses'

export default {
  name: 'CourseAssignment',
  setup() {
    const activeView = ref('teacher')
    
    // 教师相关
    const teachers = ref([])
    const teacherSearchQuery = ref('')
    const teacherStatusFilter = ref('')
    
    // 课程相关
    const courses = ref([])
    const courseSearchQuery = ref('')
    const courseCategoryFilter = ref('')
    
    // 模态框状态
    const showAssignCoursesModal = ref(false)
    const showAssignTeachersModal = ref(false)
    const currentTeacher = ref(null)
    const currentCourse = ref(null)
    
    // 分配相关
    const availableCourses = ref([])
    const availableTeachers = ref([])
    const currentTeacherCourses = ref([])
    const currentCourseTeachers = ref([])
    const availableCoursesSearch = ref('')
    const availableTeachersSearch = ref('')
    
    // 计算属性
    const filteredAvailableCourses = computed(() => {
      if (!availableCoursesSearch.value) return availableCourses.value
      const query = availableCoursesSearch.value.toLowerCase()
      return availableCourses.value.filter(course => 
        course.name.toLowerCase().includes(query) ||
        course.course_code.toLowerCase().includes(query)
      )
    })
    
    const filteredAvailableTeachers = computed(() => {
      if (!availableTeachersSearch.value) return availableTeachers.value
      const query = availableTeachersSearch.value.toLowerCase()
      return availableTeachers.value.filter(teacher => 
        teacher.name.toLowerCase().includes(query) ||
        teacher.employee_id.toLowerCase().includes(query) ||
        teacher.email.toLowerCase().includes(query)
      )
    })
    
    // 方法
    const loadTeachers = async () => {
      try {
        const response = await getTeachers()
        
        // 检查响应数据是否有效
        if (response.code !== 200 || !response.data || !Array.isArray(response.data)) {
          teachers.value = []
          return
        }
        
        // 转换教师数据格式并加载课程信息
        const teachersWithCourses = await Promise.all(
          response.data.map(async (teacher) => {
            const teacherData = {
              id: teacher.userId,
              name: teacher.realname || teacher.username,
              employee_id: teacher.username,
              email: teacher.email,
              courses: []
            }
            
            // 过滤条件
            if (teacherSearchQuery.value) {
              const query = teacherSearchQuery.value.toLowerCase()
              if (!teacherData.name.toLowerCase().includes(query) && 
                  !teacherData.employee_id.toLowerCase().includes(query)) {
                return null
              }
            }
            
            // 加载教师的课程信息
            try {
              const coursesResponse = await getTeacherCourses(teacher.userId)
              if (coursesResponse.code === 200 && coursesResponse.data && Array.isArray(coursesResponse.data)) {
                teacherData.courses = coursesResponse.data.map(course => ({
                  id: course.courseId,
                  name: course.courseName,
                  course_code: course.courseCode,
                  description: course.description,
                  credits: 3, // 默认学分
                  category: course.subject || 'required',
                  status: course.status
                }))
              }
            } catch (courseError) {
              console.error(`加载教师 ${teacherData.name} 的课程失败:`, courseError)
              // 课程加载失败时保持空数组，不影响教师列表显示
            }
            
            return teacherData
          })
        )
        
        teachers.value = teachersWithCourses.filter(t => t !== null)
      } catch (error) {
        console.error('加载教师列表失败:', error)
        teachers.value = []
      }
    }
    
    const loadCourses = async () => {
      try {
        const response = await getCourses()
        
        // 检查响应数据是否有效
        if (response.code !== 200 || !response.data || !Array.isArray(response.data)) {
          courses.value = []
          return
        }
        
        // 为每个课程加载教师信息
        const coursesWithTeachers = await Promise.all(
          response.data.map(async (course) => {
            const courseData = {
              id: course.courseId,
              name: course.courseName,
              course_code: course.courseCode,
              description: course.description,
              credits: 3, // 默认学分
              category: course.subject || 'required',
              status: course.status,
              teachers: []
            }
            
            // 过滤条件
            if (courseSearchQuery.value) {
              const query = courseSearchQuery.value.toLowerCase()
              if (!courseData.name.toLowerCase().includes(query) && 
                  !courseData.course_code.toLowerCase().includes(query)) {
                return null
              }
            }
            
            if (courseCategoryFilter.value && courseData.category !== courseCategoryFilter.value) {
              return null
            }
            
            try {
              const teachersResponse = await getCourseTeachers(course.courseId)
              if (teachersResponse.code === 200 && teachersResponse.data) {
                courseData.teachers = teachersResponse.data.map(teacherCourse => ({
                  id: teacherCourse.teacher.userId,
                  name: teacherCourse.teacher.realname || teacherCourse.teacher.username,
                  employee_id: teacherCourse.teacher.username,
                  email: teacherCourse.teacher.email
                }))
              }
            } catch (error) {
              console.error(`加载课程${course.courseId}的教师信息失败:`, error)
            }
            
            return courseData
          })
        )
        
        courses.value = coursesWithTeachers.filter(c => c !== null)
      } catch (error) {
        console.error('加载课程列表失败:', error)
        courses.value = []
      }
    }
    
    const searchTeachers = () => {
      loadTeachers()
    }
    
    const searchCourses = () => {
      loadCourses()
    }
    
    const getCategoryLabel = (category) => {
      const labels = {
        required: '必修课',
        elective: '选修课',
        practical: '实践课'
      }
      return labels[category] || category
    }
    
    const assignCoursesToTeacher = async (teacher) => {
      currentTeacher.value = teacher
      
      try {
        // 加载教师已分配的课程
        const teacherCoursesResponse = await getTeacherCourses(teacher.id)
        if (teacherCoursesResponse.code === 200 && teacherCoursesResponse.data && Array.isArray(teacherCoursesResponse.data)) {
          currentTeacherCourses.value = teacherCoursesResponse.data.map(course => ({
            id: course.courseId,
            name: course.courseName,
            course_code: course.courseCode,
            credits: 3, // 默认学分
            description: course.description
          }))
        } else {
          currentTeacherCourses.value = []
        }
        
        // 加载所有课程
        const allCoursesResponse = await getCourses()
        if (allCoursesResponse.code === 200 && allCoursesResponse.data) {
          const allCourses = allCoursesResponse.data.map(course => ({
            id: course.courseId,
            name: course.courseName,
            course_code: course.courseCode,
            credits: 3, // 默认学分
            description: course.description
          }))
          
          // 从可分配课程中排除已分配的课程
          const assignedCourseIds = currentTeacherCourses.value.map(c => c.id)
          availableCourses.value = allCourses.filter(course => !assignedCourseIds.includes(course.id))
        }
        
        showAssignCoursesModal.value = true
      } catch (error) {
        console.error('加载课程信息失败:', error)
      }
    }
    
    const assignTeachersToCourse = async (course) => {
      currentCourse.value = course
      
      try {
        // 加载课程已分配的教师
        const courseTeachersResponse = await getCourseTeachers(course.id)
        if (courseTeachersResponse.code === 200 && courseTeachersResponse.data) {
          currentCourseTeachers.value = courseTeachersResponse.data.map(teacherCourse => ({
            id: teacherCourse.teacher.userId,
            name: teacherCourse.teacher.realname || teacherCourse.teacher.username,
            employee_id: teacherCourse.teacher.username,
            email: teacherCourse.teacher.email
          }))
        } else {
          currentCourseTeachers.value = []
        }
        
        // 加载所有教师
        const allTeachersResponse = await getTeachers()
        if (allTeachersResponse.code === 200 && allTeachersResponse.data) {
          const teachersData = allTeachersResponse.data.map(user => ({
            id: user.userId,
            name: user.realname || user.username,
            employee_id: user.username,
            email: user.email
          }))
          
          const assignedTeacherIds = currentCourseTeachers.value.map(t => t.id)
          availableTeachers.value = teachersData.filter(
            teacher => !assignedTeacherIds.includes(teacher.id)
          )
        }
        
        showAssignTeachersModal.value = true
      } catch (error) {
        console.error('加载教师信息失败:', error)
      }
    }
    
    const assignCourseToTeacher = async (course) => {
      try {
        // 根据OpenAPI文档构建请求数据
        const assignData = {
          teacherId: currentTeacher.value.id,
          courseId: course.id,
          permissionType: 'write' // 默认权限类型
        }
        const response = await assignTeacherToCourse(assignData)
        
        if (response.code === 200) {
          // 更新本地状态
          currentTeacherCourses.value.push(course)
          availableCourses.value = availableCourses.value.filter(c => c.id !== course.id)
          
          // 刷新主列表
          loadTeachers()
        }
      } catch (error) {
        console.error('分配课程失败:', error)
      }
    }
    
    const assignTeacherToCourseAction = async (teacher) => {
      try {
        // 根据OpenAPI文档构建请求数据
        const assignData = {
          teacherId: teacher.id,
          courseId: currentCourse.value.id,
          permissionType: 'write' // 默认权限类型
        }
        const response = await assignTeacherToCourse(assignData)
        
        if (response.code === 200) {
          // 更新本地状态
          currentCourseTeachers.value.push(teacher)
          availableTeachers.value = availableTeachers.value.filter(t => t.id !== teacher.id)
          
          // 刷新主列表
          loadCourses()
        }
      } catch (error) {
        console.error('分配教师失败:', error)
      }
    }
    
    const removeCourseFromTeacher = async (course) => {
      try {
        // 使用OpenAPI文档定义的删除接口
        const response = await removeTeacherFromCourseAPI(currentTeacher.value.id, course.id)
        
        if (response.code === 200) {
          // 更新本地状态
          currentTeacherCourses.value = currentTeacherCourses.value.filter(c => c.id !== course.id)
          availableCourses.value.push(course)
          
          // 刷新主列表
          loadTeachers()
        }
      } catch (error) {
        console.error('移除课程失败:', error)
      }
    }
    
    const removeTeacherFromCourse = async (teacherIdOrObj, courseIdOrObj) => {
      try {
        let teacherId, courseId
        
        // 处理不同的调用方式
        if (typeof teacherIdOrObj === 'object') {
          teacherId = teacherIdOrObj.id
          courseId = courseIdOrObj
        } else {
          teacherId = teacherIdOrObj
          courseId = courseIdOrObj
        }
        
        const response = await removeTeacherFromCourseAPI(teacherId, courseId)
        
        if (response.code !== 200) {
          throw new Error('移除教师失败')
        }
        
        // 如果在模态框中，更新本地状态
        if (showAssignTeachersModal.value && typeof teacherIdOrObj === 'object') {
          currentCourseTeachers.value = currentCourseTeachers.value.filter(t => t.id !== teacherId)
          availableTeachers.value.push(teacherIdOrObj)
        }
        
        // 刷新主列表
        if (activeView.value === 'teacher') {
          loadTeachers()
        } else {
          loadCourses()
        }
      } catch (error) {
        console.error('移除教师失败:', error)
      }
    }
    
    const filterAvailableCourses = () => {
      // 过滤逻辑在计算属性中处理
    }
    
    const filterAvailableTeachers = () => {
      // 过滤逻辑在计算属性中处理
    }
    
    const submitCourseAssignment = async () => {
      try {
        // 显示确认提示
        if (confirm('确认提交课程分配更改吗？')) {
          // 刷新教师列表以确保数据同步
          await loadTeachers()
          
          // 关闭模态框
          closeModals()
          
          // 显示成功提示
          alert('课程分配已成功提交！')
        }
      } catch (error) {
        console.error('提交课程分配失败:', error)
        alert('提交失败，请重试')
      }
    }
    
    const closeModals = () => {
      showAssignCoursesModal.value = false
      showAssignTeachersModal.value = false
      currentTeacher.value = null
      currentCourse.value = null
      availableCoursesSearch.value = ''
      availableTeachersSearch.value = ''
    }
    
    onMounted(() => {
      loadTeachers()
      loadCourses()
    })
    
    return {
      activeView,
      teachers,
      courses,
      teacherSearchQuery,
      teacherStatusFilter,
      courseSearchQuery,
      courseCategoryFilter,
      showAssignCoursesModal,
      showAssignTeachersModal,
      currentTeacher,
      currentCourse,
      availableCourses,
      availableTeachers,
      currentTeacherCourses,
      currentCourseTeachers,
      availableCoursesSearch,
      availableTeachersSearch,
      filteredAvailableCourses,
      filteredAvailableTeachers,
      loadTeachers,
      loadCourses,
      searchTeachers,
      searchCourses,
      getCategoryLabel,
      assignCoursesToTeacher,
      assignTeachersToCourse,
      assignCourseToTeacher,
      assignTeacherToCourseAction,
      removeCourseFromTeacher,
      removeTeacherFromCourse,
      filterAvailableCourses,
      filterAvailableTeachers,
      submitCourseAssignment,
      closeModals
    }
  }
}
</script>

<style scoped>
.course-assignment {
  padding: 0;
}

.header {
  margin-bottom: 24px;
}

.header h2 {
  margin: 0 0 8px 0;
  color: #1f2937;
}

.subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 8px;
  width: fit-content;
}

.tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.tab-btn:hover {
  background: #e5e7eb;
}

.tab-btn.active {
  background: #3b82f6;
  color: white;
}

.filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.search-box input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.filters select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.teacher-cards,
.course-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.teacher-card,
.course-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.2s;
}

.teacher-card:hover,
.course-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.teacher-header,
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.teacher-info h3,
.course-info h3 {
  margin: 0 0 4px 0;
  color: #1f2937;
  font-size: 18px;
}

.teacher-info p,
.course-info p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.category-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}

.category-tag.required {
  background: #dbeafe;
  color: #1e40af;
}

.category-tag.elective {
  background: #d1fae5;
  color: #065f46;
}

.category-tag.practical {
  background: #fef3c7;
  color: #92400e;
}

.courses-section h4,
.teachers-section h4 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.course-list,
.teacher-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-item,
.teacher-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.course-info,
.teacher-info {
  flex: 1;
}

.course-name,
.teacher-name {
  font-weight: 500;
  color: #1f2937;
  font-size: 14px;
}

.course-code,
.teacher-code {
  color: #6b7280;
  font-size: 12px;
  margin-left: 8px;
}

.no-courses,
.no-teachers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #9ca3af;
  font-style: italic;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

.btn-xs {
  padding: 2px 6px;
  font-size: 10px;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-outline {
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.btn:hover {
  opacity: 0.8;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal.large {
  max-width: 900px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  color: #1f2937;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
}

.modal-body {
  padding: 24px;
}

.assignment-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.available-section h4,
.assigned-section h4 {
  margin: 0 0 12px 0;
  color: #1f2937;
  font-size: 16px;
}

.item-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.assignment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.2s;
}

.assignment-item:last-child {
  border-bottom: none;
}

.assignment-item:hover {
  background: #f9fafb;
}

.assignment-item.assigned {
  background: #f0f9ff;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 2px;
}

.item-details {
  font-size: 12px;
  color: #6b7280;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
  .teacher-cards,
  .course-cards {
    grid-template-columns: 1fr;
  }
  
  .assignment-container {
    grid-template-columns: 1fr;
  }
  
  .teacher-header,
  .course-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>